<template>
  <div class="modify-volume-details">
    <XlsxTable :columns="xlsxColumn" :colWidths="colWidths" :minRows="tableData.length" :table-data="tableData" :config="{ height: '1000px', ...conifg }" :showButton="false"></XlsxTable>

    <div class="operation-btn-wrapper">
      <a-button v-debounce type="primary" @click="submitHandle">提交</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import { xlsxColumn, colWidths } from "./data";
import OperationHook from "./composables/operationHook";
import { getDetailsByIdApi } from "@/api/client/documentManagement/waybillManagement";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WarehouseEntryChannel.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", v: boolean): void;
  (e: "submit"): void;
}>();
const { passData, visible, type } = toRefs(props);
const { loading, tableData, conifg } = InitHook();

const { submitHandle, resetHandle } = OperationHook({
  loading,
  emit,
  tableData,
  type
});

const init = async (id: string) => {
  loading.value = true;
  return getDetailsByIdApi(id)
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data.preOrderShipmentBoxVolume;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init(passData.value[0].id);
  }
);
init(passData.value[0].id);
</script>
<style lang="stylus" scoped>
.modify-volume-details{
    padding-bottom: 62px;
    .operation-btn-wrapper{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        background-color: #fff;
        z-index: 9999;
        :deep(.ant-btn){
            margin-right: 16px;
        }
    }
}
</style>
